<template>
  <view :class="{'shareActivitySidesWrapper':true,'isShow':isShow,'isHide':!isShow}"
    v-if="(subStatus==0||subStatus==20)&&isShareVipAvailable">
    <view class="sideCloseButton" @click="isShow=false"></view>
    <view class="sideTextdialog" @click="handleOpenDialog"></view>
    <view class="sideXiaolan"></view>
    <u-popup v-model="sharepopupShow" mode="center" negative-top="400">
      <view class="sharepopupWrapper">
        <view class="sharepopupMain">
          <view class="rewardContent">
            <view class="rewardItem" v-for="item,index in rewardList" :key="index">
              <view class="rewardFlag"></view>
              {{item.title}}
            </view>
          </view>
        </view>
        <view class="sharepopupCloseBtn" @click="sharepopupShow=false"></view>
        <!-- <view class="sharepopupBtn" @click="handleShare">
        </view> -->
      </view>
    </u-popup>
  </view>
</template>

<script>
import { throttle } from "lodash";
import {
  getMySubscribeStatus,
  checkShareVipAvailable,
} from "@/api/modules/vip.js";
export default {
  name: "shareActivitySides",
  props: {
    positionId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      isShow: true,
      sharepopupShow: false,
      rewardList: [
        { title: "每月一份行业/职业薪酬报告" },
        { title: "每月分享行业/职业案例(或职讯) 5篇" },
      ],
      subStatus: "",
      subVipStatus: "",
      subId: "",
      personId: "",
      isShareVipAvailable: false,
    };
  },
  mounted() {
    this.reloadPersonId();
    // this.checkShareVipAvailable();
    // console.log("subStatus,positionId", this.subStatus, this.positionId);
  },
  methods: {
    checkShareVipAvailable() {
      const params = {
        positionId: this.positionId,
      };
      checkShareVipAvailable(params).then((res) => {
        if (res.code == 200) {
          this.isShareVipAvailable = res.data;
        }
      });
    },

    reloadPersonId() {
      this.personId = uni.getStorageSync("person-id").slice(2) || "";
      // this.reqGetMySubscribeStatus();
    },
    handleOpenDialog: throttle(function () {
      this.handleOpenDialogFunc();
    }),
    handleOpenDialogFunc() {
      if (!this.personId) {
        console.log("1111");
        this.$emit("checkLogin");
      } else {
        if (this.sharepopupShow) {
          this.sharepopupShow = false;
        } else {
          this.sharepopupShow = true;
        }
      }
    },
    reqGetMySubscribeStatus() {
      const params = {
        personId: this.personId,
      };
      getMySubscribeStatus(params).then((res) => {
        if (res.code == 200) {
          this.subStatus = res.data.subStatus;
          this.subVipStatus = res.data.subVipStatus;
          this.subId = res.data.subId;
          // console.log(
          //   "(subStatus==0||subStatus==20)&&positionId",
          //   (this.subStatus == 0 || this.subStatus == 20) && this.positionId
          // );
        }
      });
    },
    loginSuccessBack() {
      this.personId = uni.getStorageSync("person-id").slice(2) || "";
    },
    handleShare() {
      try {
        uni.requestSubscribeMessage({
          tmplIds: ["aRgtnpYL5P6fXRO53Zw5nU7TRm0Q--p1iq8BtQhU1xs"],
          complete: (res) => {
            console.log(res);
          },
        });
      } catch (error) {
        console.log("订阅错误！", error);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@keyframes toShow {
  from {
    right: -400rpx;
  }
  to {
    right: 0;
  }
}
@keyframes toHide {
  from {
    right: 0;
  }
  to {
    right: -400rpx;
  }
}
.shareActivitySidesWrapper {
  position: fixed;
  right: 0;
  bottom: 236rpx;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  &.isShow {
    animation: toShow 0.3s;
    animation-timing-function: cubic-bezier(0.8, 0.6, 0.58, 1);
    right: 0rpx;
  }
  &.isHide {
    animation: toHide 0.3s;
    animation-timing-function: cubic-bezier(0.8, 0.6, 0.58, 1);
    right: -400rpx;
  }
  .sideCloseButton {
    position: relative;
    right: 30rpx;
    bottom: 4rpx;
    width: 24rpx;
    height: 24rpx;
    background-image: url($img-base + "career/sideCloseButton.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .sideTextdialog {
    position: relative;
    right: -4rpx;
    width: 248rpx;
    height: 198rpx;
    background-image: url($img-base + "career/sideTextdialog.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .sideXiaolan {
    position: relative;
    top: -8rpx;
    width: 82rpx;
    height: 167rpx;
    background-image: url($img-base + "career/sideXiaolan.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}
.sharepopupWrapper {
  .sharepopupMain {
    width: 568rpx;
    height: 678rpx;
    background-image: url($img-base + "career/sharepopupMain.png?v=1");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .rewardContent {
      display: flex;
      flex-direction: column;
      position: relative;
      top: 318rpx;
      left: 34rpx;
      width: 500rpx;
      padding: 8rpx 20rpx 20rpx 30rpx;
      background-color: white;
      .rewardItem {
        display: flex;
        line-height: 48rpx;
        .rewardFlag {
          display: inline-block;
          width: 8rpx;
          height: 10rpx;
          margin-top: 16rpx;
          background: #ee6738;
          margin-right: 16rpx;
        }
      }
    }
  }
  .sharepopupCloseBtn {
    position: absolute;
    top: 164rpx;
    right: 24rpx;
    width: 28rpx;
    height: 28rpx;
    background-image: url($img-base + "career/sharepopupCloseBtn.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .sharepopupBtn {
    width: 568rpx;
    height: 88rpx;
    background-image: url($img-base + "career/sharepopupBtn.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-top: 32rpx;
  }
}
</style>
<style lang="scss">
.shareActivitySidesWrapper {
  ::v-deep .u-mode-center-box {
    background-color: transparent !important;
  }
}
</style>